/* 获取元素 */
const container = document.getElementById("container");
/* 颜色数组 */
const colors = ["#e74c3c", "#8e44ad", "#3498db", "#e67e22", "#2ecc71"];
/*  */
const SQUARES = 500;

for (let i = 0; i < SQUARES; i++) {
  /* 创建div元素 */
  const square = document.createElement("div");
  /* 给square元素添加square类样式 */
  square.classList.add("square");
  /* 指针移到有事件监听的元素或者它的子元素内。 */
  square.addEventListener("mouseover", () => setColor(square));
  /* 指针移出元素，或者移到它的子元素上。 */
  square.addEventListener("mouseout", () => removeColor(square));
  /*将square元素添加到container元素内 */
  container.appendChild(square);
}

const setColor = (element) => {
  /* 获取到随机的元素 */
  const color = getRandomColor();
  /* 设置背景设为随机到的颜色 */
  element.style.background = color;
  /* 设置盒子的阴影颜色为随机到的颜色 */
  element.style.boxShadow = `0 0 2px ${color}, 0 0 10px ${color}`;
};
const removeColor = (element) => {
  /* 还原背景颜色 */
  element.style.background = "#1d1d1d";
  /* 还原盒子阴影颜色 */
  element.style.boxShadow = "0 0 2px #000";
};
/* 从数组中随机抽取一位元素 */
const getRandomColor = () => {
  return colors[Math.floor(Math.random() * colors.length)];
};
